<template>
  <div class="containers">
    <div class="container">
      <div class="form-box" style="width: 100%;max-width: 900px;">
        <el-tabs>
          <el-tab-pane label="手动消息" >
            <el-form ref="form" label-width="120px">
							<el-form-item label="类型">
								<el-select v-model="form.user_code" placeholder="请选择类型" @change="load">
									<el-option v-for="(item, index) in options" :key="item.id" :label="item.key" :value="index">
									</el-option>
								</el-select>
							</el-form-item>
              <el-form-item label="标题">
                <el-input v-model="form.title"></el-input>
              </el-form-item>
              <el-form-item label="内容">
                <el-input v-model="form.message" type="textarea"></el-input>
              </el-form-item>
              <el-form-item label="范围" v-if="form.user_code==0">
								<el-checkbox-group v-model="form.user_range">
									<el-checkbox :label="0">全部</el-checkbox>
									<el-checkbox :label="1">商家</el-checkbox>
									<el-checkbox :label="2">用户</el-checkbox>
								</el-checkbox-group>
              </el-form-item>
              <el-form-item label="商家" v-if="form.user_code==1">
								<div style="display: flex;">
									<el-input v-model="keyword" placeholder="编号/电话" class="handle-input mr10"></el-input>
									<el-button type="primary" icon="el-icon-search" @click="load()">搜索</el-button>
								</div>
								<el-table :data="tableDatas" border class="table" ref="multipleTable" header-cell-class-name="table-header"
									 @row-click="getrows">
									<el-table-column label="选择" width="80" fixed>
										<template slot-scope="scope">
											<el-radio class="radio" v-model="form.user_id" :label="scope.row.ID">&nbsp;</el-radio>
										</template>
									</el-table-column>
									<el-table-column prop="ID" label="ID" align="center" width="80"></el-table-column>
									<el-table-column prop="name" label="店铺名称" align="center"></el-table-column>
									<el-table-column prop="mobile" label="联系电话" align="center" min-width="100"></el-table-column>
								</el-table>
								<div class="pagination">
									<el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
										:page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
								</div>
              </el-form-item>
              <el-form-item label="用户" v-if="form.user_code==2">
								<div style="display: flex;">
									<el-input v-model="keyword" placeholder="编号/电话" class="handle-input mr10"></el-input>
									<el-button type="primary" icon="el-icon-search" @click="load()">搜索</el-button>
								</div>
								<el-table :data="tableDatas" border class="table" ref="multipleTable" header-cell-class-name="table-header"
									 @row-click="getrows">
									<el-table-column label="选择" width="80" fixed>
										<template slot-scope="scope">
											<el-radio class="radio" v-model="form.user_id" :label="scope.row.ID">&nbsp;</el-radio>
										</template>
									</el-table-column>
									<el-table-column prop="ID" label="ID" align="center" width="80"></el-table-column>
									<el-table-column prop="nickname" label="姓名" align="center"></el-table-column>
									<el-table-column prop="mobile" label="电话" align="center" min-width="100"></el-table-column>
								</el-table>
								<div class="pagination">
									<el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
										:page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
								</div>
              </el-form-item>
              <span class="dialog-footer">
                <el-button type="primary" @click="setlv()">确 定</el-button>
              </span>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>

export default {


  data() {
    return {
			options: [
        {key:'全部',id:0},
        {key:'商家',id:1},
        {key:'用户',id:2},
      ], // 下拉选项
      code:0,
      form: {
        title: '',
        message: '',
        user_code: 0,
        user_id: 0,
        user_range: [1],
      },
			query: {
        pageIndex: 1,
        pageSize: 20
      },
      tableDatas:[],
      keyword:'',

    };
  },
  created() {
    this.load()//获取
  },
  methods: {
    setlv() {
      this.form.user_code = Number(this.form.user_code)
      this.request('admin/sendMessage/', 'post', this.form).then(
        res => {
          this.$message.success(res.errmsg)
        },
        function () {
          console.log('请求失败处理');
        }
      );
    },
		load() {
			if(this.form.user_code==2){
				this.request('admin/userInfo/', 'get', { page: this.query.pageIndex, size: this.query.pageSize, keyword: this.keyword }).then(res => {
					this.tableDatas = res.data.data
					this.pageTotal = res.data.total
				})
			}else if(this.form.user_code==1){
				this.request('admin/businessList/', 'get', { page: this.query.pageIndex, size: this.query.pageSize, keyword: this.keyword }).then(res => {
					this.tableDatas = res.data.data
					this.pageTotal = res.data.total
				})
			}

  	},
		getrows(row) {
      this.form.user_id = parseInt(row.ID)
		},
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, 'pageIndex', val);
      this.load();
    }
	}
};
</script>
<style scoped="scoped">
.container {
  padding: 20px;
}

.activeattr {
  border: 1px solid rgb(64, 158, 255);
  color: rgb(64, 158, 255);
}

.el-upload {
  width: 100px !important;
  height: 100px !important;
}
</style>
